<template>
	<view class="page-my">
		<!-- 用户信息 -->
		<view class="info">
			<view class="avatar">
				<image :src="info.avatar" />
			</view>
			<view class="name"><cl-text :value="info.name" :size="48" color="#fff"></cl-text></view>
			<view class="introduction"
				><cl-text
					:value="info.introduction"
					:size="24"
					color="#FF9D9D"
					:ellipsis="1"
				></cl-text
			></view>
		</view>
		<!-- 统计 -->
		<view class="count">
			<view class="item" v-for="(item, index) in count" :key="index">
				<view class="icon">
					<image :src="item.icon" />
				</view>
				<view class="name">
					{{ item.name }}
				</view>
			</view>
		</view>
		<!-- 线 -->
		<view class="line"></view>
		<!-- 导航 -->
		<view class="nav">
			<cl-list-item label="我的关注" border @tap="myAttention">
				<text slot="append" class="cl-icon-arrow-right"></text>
			</cl-list-item>
			<cl-list-item label="我的钱包" border>
				<text slot="append" class="cl-icon-arrow-right"></text>
			</cl-list-item>
			<cl-list-item label="消息通知" border @tap="toMessage">
				<text slot="append" class="cl-icon-arrow-right"></text>
			</cl-list-item>
			<cl-list-item label="我扫一扫" border>
				<text slot="append" class="cl-icon-arrow-right"></text>
			</cl-list-item>
			<cl-list-item label="免流服务" border>
				<text slot="append" class="cl-icon-arrow-right"></text>
			</cl-list-item>
			<cl-list-item label="广告推广">
				<text slot="append" class="cl-icon-arrow-right"></text>
			</cl-list-item>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			info: {
				avatar: require("@/static/images/avatar.png"),
				name: "拍拍",
				introduction: "主人比较懒，没有留下个人介绍",
			},
			count: [
				{ icon: require("@/static/icon/favorites.png"), name: "我的收藏" },
				{ icon: require("@/static/icon/comment.png"), name: "我的评论" },
				{ icon: require("@/static/icon/like.png"), name: "我的点赞" },
				{ icon: require("@/static/icon/history.png"), name: "浏览历史" },
			],
		};
	},
	methods: {
		toMessage() {
			uni.navigateTo({
				url: "/pages/message/index",
			});
		},
		myAttention() {
			uni.navigateTo({
				url: "/pages/login/index",
			});
		},
	},
};
</script>

<style lang="scss">
.page-my {
	.info {
		width: 100%;
		padding: 38rpx 30rpx;
		background-color: #f5393b;
		box-sizing: border-box;
		.avatar {
			width: 129rpx;
			height: 129rpx;
			margin: 0 auto;
			border-radius: 50%;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.name {
			margin-top: 16rpx;
			text-align: center;
		}
		.introduction {
			margin-top: 12rpx;
			padding: 0 30rpx;
			text-align: center;
		}
		.avatar {
			width: 129rpx;
			height: 129rpx;
			margin: 0 auto;
			border-radius: 50%;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.name {
			margin-top: 16rpx;
			text-align: center;
		}
		.introduction {
			margin-top: 12rpx;
			padding: 0 30rpx;
			text-align: center;
		}
	}

	.count {
		display: flex;
		padding: 46rpx 34rpx;
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 84rpx;
			text-align: center;
			flex: 1;
		}
		.icon {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50rpx;
			height: 50rpx;
			margin-bottom: 28rpx;
			image {
				max-width: 50rpx;
				max-height: 50rpx;
			}
		}
		.name {
			font-size: 22rpx;
			font-weight: 400;
			color: #333333;
		}
	}
	.line {
		width: 100%;
		height: 15rpx;
		background-color: #fafafc;
	}
	.nav {
		padding: 0 32rpx;
		.cl-list-item {
			padding: 4rpx 6rpx;
		}
		.cl-list-item__label {
			font-size: 28rpx;
			font-weight: 400;
			color: #252737;
		}
		text {
			color: #cacad6;
		}
	}
}
</style>
